<template>
  <div class="box">
    <div class="activity-detail-box">
      <div class="left-content">
        <div class="title">{{article.name}}</div>
        <div class="sub-desc">
          <span class="come" v-if="article.origin">来源 | {{article.origin}}</span>
          <span class="anchor" v-if="article.author">作者 | <span class="people" @click="toDetail">{{article.author}}</span></span>
          <span class="time" v-if="article.lastUpdate">{{formatDate2(article.lastUpdate)}}</span>
        </div>
        <!-- 立即报名 -->
        <div class="apply-box">
          <div class="msg-item">
            <img src="../../assets/date1.png" class="icon" alt="">
            {{formatDate(article.beginDate)}} <span v-if="article.finishDate">- {{formatDate(article.finishDate)}}</span>
          </div>
          <div class="msg-item" v-if="article.location">
            <img src="../../assets/address1.png" class="icon" alt="">
            {{article.location}}
          </div>
          <div class="apply-btn" @click="onApply(article.applyUrl)" v-if="btnSwitch">立即报名</div>
        </div>
        <!-- 活动主题 -->
        <div class="theme-box" v-if="article.summary">
          {{ article.summary }}
        </div>
        <div class="detail-box" v-html="article.content"></div>
        <!-- 标签 -->
        <div class="tags-box">
          <div class="tag" v-for="(item, index) of article.tags" :key="index" @click="tagToDetail(item)">{{item.name}}</div>
          <!-- <div class="fenxiang-box">
            <div class="label">分享到：</div>
            <div class="fenxiang-item">
              <img src="../../assets/wx.png" class="icon" alt="">
              微信
            </div>
            <div class="fenxiang-item">
              <img src="../../assets/xl.png" class="icon" alt="">
              新浪
            </div>
          </div> -->
        </div>
        <!-- 你可能感兴趣 -->
        <Interested />
      </div>
      <div class="right-content">
        <ScanErcode />
        <!-- 下一篇 -->
        <NextActicle :data="nextActicleDetail" />
      </div>
    </div>
  </div>
</template>

<script>
// 可能感兴趣
import Interested from '@/components/Interested';
// 扫一扫
import ScanErcode from '@/components/ScanErcode';
// 下一篇
import NextActicle from '@/components/NextActicle';
import { articlesDetail, articlesRead, articlesNextPre } from '@/api/api';
import moment from 'moment';
moment.locale('zh-cn');

export default {
  components: {
    Interested,
    ScanErcode,
    NextActicle
  },
  data() {
    return {
      article: {},
      nextActicleDetail: {
        title: '',
        content: '',
        date: '',
        uuid: ''
      },
      msTime: '',
      timer: ''
    }
  },
  computed: {
    btnSwitch() {
      const { beginDate, finishDate } = this.article;
      let result = true;
      if (finishDate) {
        if (finishDate < this.msTime) {
          result = false;
        } else {
          result = true;
        }
      } else {
        if (beginDate < this.msTime) {
          result = false;
        } else {
          result = true;
        }
      }
      return result;
    }
  },
  created() {
    this.getMsTime();
    this.timer = setInterval(this.getMsTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted() {
    const uuid = this.$route.query.uuid;
    this.getDetail(uuid);
    this.getActiclesNextPre(uuid);
  },
  methods: {
    getMsTime() {
        this.msTime = new Date().getTime();
      },
    tagToDetail(item) {
      const params = {
        keywords: item.name,
        type: 'tag',
        tagId: item.uuid
      };
      let routerJump = this.$router.resolve({ name: 'Search', query: params });
      window.open(routerJump.href, '_blank');
    },
    // 立即报名
    onApply(path) {
      var a = document.createElement("a");
      a.setAttribute("href", path);
      a.setAttribute("target", "_blank");
      a.click();
    },
    // 点击作者跳转页面
    toDetail() {
      const params = {
        keywords: this.article.author,
        type: 'anchor'
      };
      let routerJump = this.$router.resolve({ name: 'Search', query: params });
      window.open(routerJump.href, '_blank');
    },
    // 通过UUId 获取文章详情
    async getDetail(uuid) {
      const res = await articlesDetail(uuid);
      this.article = res.article;
      let head = document.getElementsByTagName('head');
      let meta = document.createElement('meta');
      document.querySelector('meta[name="keywords"]').setAttribute('content', res.article.name)
      document.querySelector('meta[name="description"]').setAttribute('content', res.article.summary)
      head[0].appendChild(meta)
    },
    // 处理时间
    formatDate(date) {
      return moment(date).format('ll');
    },
    // 处理时间
    formatDate2(date) {
      let result
      const nowMM = new Date().getTime()
      if (nowMM - date < 604800000) {
        result = moment(date).startOf('hour').fromNow()
      } else {
        result = moment(date).format('ll')
      }
      return result 
    },
    // 标记文章已读
    async submitRead(uuid) {
      await articlesRead(uuid);
    },
    // 获取上一篇，下一篇
    async getActiclesNextPre(uuid) {
      const res = await articlesNextPre(uuid);
      if (res.next) {
        this.nextActicleDetail.title = res.next.name;
        this.nextActicleDetail.content = res.next.summary;
        this.nextActicleDetail.date = this.formatDate(res.next.lastUpdate);
        this.nextActicleDetail.uuid = res.next.uuid;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background: #f1f1f1;
  padding-top: 40px;
  .activity-detail-box {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    .left-content {
      width: 800px;
      float: left;
      margin-right: 40px;
      .title {
        width: 100%;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #272727;
        line-height: 42px;
        margin-bottom: 12px;
      }
      .sub-desc {
        font-size: 14px;
        overflow: hidden;
        font-weight: 400;
        color: #696969;
        line-height: 20px;
        margin-bottom: 24px;
        .come {
          margin-right: 24px;
        }
        .time {
          float: right;
        }
        .anchor {
          cursor: pointer;
          &:hover {
            .people {
              text-decoration: underline;
              color: #FF9195;
            }
          }
        }
      }
      .apply-box {
        width: 100%;
        height: 80px;
        box-sizing: border-box;
        background: rgba(255, 145, 149, 0.1);
        border-radius: 4px;
        border: 1px solid #FF9195;
        padding: 20px;
        position: relative;
        margin-bottom: 20px;
        .msg-item {
          font-size: 14px;
          
          font-weight: 400;
          color: #4C4C4C;
          line-height: 18px;
          margin-bottom: 4px;
          .icon {
            width: 12px;
            height: 12px;
            vertical-align: middle;
            margin-right: 3px;
          }
        }
        .apply-btn {
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #F96868;
          border-radius: 4px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          position: absolute;
          top: 20px;
          right: 20px;
          cursor: pointer;
          &:active {
            opacity: 0.8;
          }
        }
      }
      .theme-box {
        width: 800px;
        padding: 20px 24px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size: 16px;
        min-height: 28px;
        font-weight: 400;
        color: #696969;
        line-height: 28px;
        background: #F9F9F9 url('../../assets/66.png') no-repeat;
        background-size: 102px 75px;
        background-position: 8px 8px;
        margin-bottom: 40px;
      }
      .detail-box {
        font-size: 16px;
        
        font-weight: 400;
        color: #272727;
        line-height: 28px;
        /deep/img {
          max-width: 100%;
          object-fit: contain;
        }
        /deep/pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: break-all;
        }
        .part1 {
          margin-bottom: 40px;
        }
        .part2 {
          width: 800px;
          height: 450px;
          border-radius: 4px;
          margin-bottom: 40px;
        }
        .part3 {
          margin-bottom: 40px;
        }
        .part4 {
          margin-bottom: 40px;
        }
      }
      .remark-box {
        font-size: 16px;
        
        font-weight: 400;
        color: #A8A8A8;
        line-height: 28px;
        margin-bottom: 20px;
      }
      .tags-box {
        overflow: hidden;
        margin-bottom: 52px;
        .tag {
          line-height: 18px;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          float: left;
          margin-right: 8px;
          background: #FFFFFF;
          border-radius: 4px;
          border: 1px solid #D8D8D8;
          padding: 7px 16px;
          cursor: pointer;
          &:hover {
            border: 1px solid #FF9195;
            color: #F96868;
          }
        }
        .fenxiang-box {
          float: right;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          .label {
            float: left;
            line-height: 32px;
          }
          .fenxiang-item {
            padding: 6px 12px;
            box-sizing: border-box;
            background: #F9F9F9;
            border-radius: 4px;
            line-height: 18px;
            margin-left: 8px;
            float: left;
            cursor: pointer;
            &:active {
              opacity: 0.8;
            }
            .icon {
              width: 20px;
              height: 20px;
              vertical-align: middle;
              margin-right: 4px;
            }
          }
        }
      }
    }
    .right-content {
      width: 340px;
      height: 1500px;
      float: left;
    }
  }
}
</style>